// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
import Vue from 'vue'
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, LineChart, ScatterChart, PieChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent
} from 'echarts/components'
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// echarts.use() 方法用于注册组件、图表类型等模块
echarts.use([
  TitleComponent, //
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  BarChart,
  PieChart,
  LineChart,
  ScatterChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
])
// TitleComponent (标题组件):
// 用于为图表添加标题。可以通过设置文本、样式等属性来定制标题。
// TooltipComponent (提示框组件):
// 提供数据项的详细信息显示。当鼠标悬停或触摸某个数据点时，会显示该点的相关信息。
// GridComponent (直角坐标系网格组件):
// 定义了直角坐标系（如折线图、柱状图等使用的坐标系）的网格布局，包括位置、大小等。
// DatasetComponent (数据集组件):
// 支持更灵活的数据管理方式，可以方便地进行数据转换和复用。
// TransformComponent (数据转换组件):
// 提供数据处理能力，例如数据过滤、聚合等操作，以便于数据展示前的预处理。
// LegendComponent (图例组件):
// 显示不同系列的标记和名称，帮助用户理解图表中的不同数据序列。
// BarChart (柱状图):
// 一种基本的图表类型，用于比较不同类别的数值大小。
// PieChart (饼图):
// 展示各部分占总体的比例关系，适合用于表示分类数据的比例分布。
// LineChart (折线图):
// 显示随时间或其他连续变量变化的趋势，适用于表现数据的变化趋势。
// ScatterChart (散点图):
// 通过点的位置展示两个变量之间的关系，适合探索变量间的相关性。
// LabelLayout (标签布局):
// 控制图表上标签的布局与显示效果，比如调整标签位置避免重叠等。
// UniversalTransition (通用过渡动画):
// 提供统一的过渡动画支持，使图表在数据更新时能够平滑过渡。
// CanvasRenderer (Canvas 渲染器):
// 使用 HTML5 Canvas 技术渲染图表，默认渲染方式之一，适合大多数情况下的图表绘制
// 绑定在原型链上
Vue.prototype.$echarts = echarts
// 导出echarts
export default echarts
